<template>
  <div id="app">
    <div class="usergoods-content"> 
      <div class="goodsbox" v-for="list in orderlist">
        <div class="goodstitle">
          <h3 style="font-size:1rem">{{ list.text }}</h3>
          <p>订单：23123123</p>
          <p>餐桌：5号桌子</p>
          <p>状态：用餐中</p>
        </div>
        <div class="goodslist">
          <div class="usercontent">
            <div class="userbox">
                <img src="" width="50" height="50">
            </div>
            <div class="username">
                <h3>用户名</h3>
                <p>2017-05-12 15:30</p>
            </div>
          </div>
          <div class="goodsitem" v-for="goods in goodslist">
            <div class="goodsimg"><img src="static/images/demoimg.jpeg" width="100%" ></div>
            <div class="goodsname">{{ goods.text }}</div>
            <div class="goodsnum">x1</div>
            <div class="goodsmoney">￥50</div>
          </div>
        </div>
      </div>
    </div>
  </div>  
</template>

<script>
  export default {
    name: 'usergoodslist',
    data: function () {
      return {
        orderlist: [
          { text: '海霸王天地会' },
          { text: '海霸王天地会' }
        ],
        goodslist: [
          { text: '菜品名称' },
          { text: '菜品名称' },
          { text: '菜品名称' }
        ]
      }      
    }
  }
</script>

<style scoped>
  /* #app{
      position: sticky;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: #f6f6f6;
  } */
  .usergoods-content{
      padding: 0.75rem;
  }
  .goodsbox{
      background: #fff;
      border-radius:6px;
      border:1px solid #ddd;
      margin-bottom: 0.75rem;
  }
  .goodstitle{
      padding:0.75rem;
      border-bottom:1px solid #ddd;
  }
  .goodstitle h3,.goodstitle p{
      margin-bottom:0.3rem;
  }
  .goodslist{
      padding:0.75rem;
  }
  .usercontent{
      display: flex;
      margin-bottom:0.75rem;
  }
  .userbox{
      width:50px;
      height: 50px;
      border-radius:100%;
      margin-right:0.75rem;
  }
  .userbox img{
      border-radius:100%;
  }
  .username p{
      color:#999;
  }
  .goodsitem{
      display: flex;
      align-items: center;
      margin-bottom:0.75rem;
  }
  .goodsimg{
      width: 25%;
      height: 50px;
      overflow: hidden;
      border-radius:6px;
  }
  .goodsimg img{
      border-radius:6px;
      display: block;
  }
  .goodsname{
      width: 50%;
      padding-left:0.5rem;
      font-size:0.9rem;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
  }
  .goodsnum{
      width:10%;
      color:#3cb034;
  }
  .goodsmoney{
      width:15%;
      color:#3cb034;
      text-align: right;
  }
</style>